<template>
    <div class="job-search-container">
        <!-- 筛选表单 -->
        <div class="filter-container">
            <el-form :model="filterForm" label-width="100px" label-position="left" @submit.prevent>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="企业名称">
                            <el-input v-model="filterForm.companyName" placeholder="请输入企业名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="职位名称">
                            <el-input v-model="filterForm.positionName" placeholder="请输入职位名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="工作城市">
                            <el-input v-model="filterForm.workCity" placeholder="请输入工作城市" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="学历要求">
                            <el-select v-model="filterForm.education" placeholder="请选择学历要求" clearable
                                style="width: 100%">
                                <el-option label="不限" value="" />
                                <el-option label="大专" value="大专" />
                                <el-option label="本科" value="本科" />
                                <el-option label="硕士" value="硕士" />
                                <el-option label="博士" value="博士" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="届次">
                            <el-select v-model="filterForm.session" placeholder="请选择届次" clearable
                                style="width: 100%">
                                <el-option label="不限" value="" />
                                <el-option label="2025届" value="2025届" />
                                <el-option label="2026届" value="2026届" />
                                <el-option label="往届" value="往届" />
                                <el-option label="实习生" value="实习生" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="职位分类">
                            <el-input v-model="filterForm.category" placeholder="请输入职位分类" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24" style="text-align: right">
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 职位列表 -->
        <div class="job-list-container" v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="8" v-for="job in jobList" :key="job.id" class="job-card-col">
                    <el-card class="job-card" shadow="hover">
                        <div class="job-card-header">
                            <div class="job-title-container">
                                <h3 class="job-title">{{ job.position }}</h3>
                            </div>
                            <div class="job-salary">{{ job.salaryRange }}</div>
                        </div>

                        <div class="job-requirements">
                            <el-tag size="small" class="requirement-tag">{{ job.educationalRequirement || '学历不限'
                                }}</el-tag>
                            <el-tag size="small" class="requirement-tag">{{ job.session }}</el-tag>
                            <el-tag size="small" type="info" class="requirement-tag">{{ getCategoryName(job.categoryId)
                                }}</el-tag>
                        </div>

                        <div class="job-company-info">
                            <div class="company-name">
                                <i class="el-icon-office-building"></i>
                                <span>{{ job.industryCategory }}</span>
                            </div>
                            <div class="company-name">
                                <i class="el-icon-office-building"></i>
                                {{ job.companyName || '未设置公司' }}
                            </div>
                            <div class="job-location">
                                <i class="el-icon-location"></i>
                                {{ job.workCity || '地址未设置' }}
                            </div>
                        </div>
                        <el-button type="primary" class="job-more" @click="viewJobDetail(job)">去投递</el-button>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 分页 -->
            <div class="pagination-container" v-if="total > 0">
                <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage"
                    :page-size="pageSize" @current-change="handlePageChange" />
            </div>

            <!-- 无数据提示 -->
            <el-empty v-if="jobList.length === 0 && !loading" description="暂无符合条件的职位" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios-config'

// 响应式状态
const jobList = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(9)
const categories = ref([])
const dialogVisible = ref(false)
const selectedJob = ref(null)

// 筛选表单数据
const filterForm = ref({
    companyName: '',
    category: '',
    positionName: '',
    workCity: '',
    education: '',
    session: '',
    category: ''
})

// 加载职位分类
const loadCategories = async () => {
    try {
        const { data } = await axios.get('api/job/categories')
        if (data.success) {
            categories.value = data.data
        }
    } catch (error) {
        ElMessage.error('加载职位分类失败')
    }
}

// 获取分类名称
const getCategoryName = (categoryId) => {
    const category = categories.value.find(item => item.id === categoryId)
    return category ? category.name : '未知分类'
}

// 加载职位列表
const loadJobList = async () => {
    loading.value = true
    try {
        const params = {
            ...filterForm.value,
            pageNum: currentPage.value,
            pageSize: pageSize.value
        }

        const { data } = await axios.post('api/job/list', params)
        if (data.success) {
            jobList.value = data.data.list
            total.value = data.data.total
        } else {
            ElMessage.error(data.error || '加载职位列表失败')
        }
    } catch (error) {
        console.error('加载失败:', error)
        ElMessage.error('加载职位列表失败')
    } finally {
        loading.value = false
    }
}

// 处理搜索
const handleSearch = () => {
    currentPage.value = 1
    loadJobList()
}

// 重置筛选条件
const handleReset = () => {
    filterForm.value = {
        companyName: '',
        category: '',
        positionName: '',
        workCity: '',
        education: '',
        session: '',
        categoryId: 0
    }
    currentPage.value = 1
    loadJobList()
}

// 处理分页变化
const handlePageChange = (page) => {
    currentPage.value = page
    loadJobList()
}

// 查看职位详情
const viewJobDetail = (job) => {
    if(job.deliveryMethod){
       window.open(job.deliveryMethod, '_blank')
    }  
}

// 组件挂载时加载数据
onMounted(() => {
    loadCategories()
    loadJobList()
})
</script>

<style scoped>
.job-search-container {
    padding: 20px;
}

.filter-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.job-list-container {
    margin-top: 20px;
}

.job-card-col {
    margin-bottom: 20px;
}

.job-card {
    height: 100%;
    transition: all 0.3s;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.job-title-container {
    display: flex;
    align-items: center;
}

.job-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

.job-salary {
    color: #f56c6c;
    font-size: 16px;
    font-weight: bold;
}

.job-requirements {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.requirement-tag {
    margin-right: 5px;
}

.job-company-info {
    margin-bottom: 15px;
    color: #606266;
    font-size: 14px;
}

.company-name,
.job-location {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.company-name i,
.job-location i {
    margin-right: 5px;
}

.job-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
